import { View, Image, Text, Input, Textarea } from '@tarojs/components'
import { AtInput } from 'taro-ui'
import Taro, { useRef, useState } from '@tarojs/taro'
import styles from './index.module.scss'
import './index.scss'
import { dialog, filter } from '@/util'

const EmployComputed = () => {
  // 基本工资
  const [ wage, setWage ] = useState("")
  // 月份
  const [ resign, setResign ] = useState("")
  // 年份
  let reginPrice = useRef(0)
  // 其他
  const [ otherPrice1, setOtherPrice1 ] = useState("")
  const [ otherPrice2, setOtherPrice2 ] = useState("")
  const handlerSetRegin = (e) => {
    let month = Math.round(e.detail.value)
    if (isNaN(month)) return setResign("")
    reginPrice.current = Math.ceil(month / 6) / 2
    setResign(e.detail.value)
  }
  let showCost = [
    { id: '1', name: '加班费用\n(默认加班概率20%、1.5倍的加班费率)', price1: 0, price2: 0 },
    { id: '2', name: '公司部分四险一金\n(原为：五险一金）', price1: 0, price2: 200 },
    { id: '3', name: '节假日福利', price1: 50, price2: 0 },
    { id: '4', name: '离职经济补偿金\n(需手动输入）', price1: 0, price2: 0 },
    { id: '5', name: '竞业限制补偿金', price1: 0, price2: 0 },
    { id: '6', name: '外包管理费用10%', price1: 0, price2: 0 },
    { id: '7', name: '可抵扣的增值税进项税', price1: 0, price2: 0 },
    { id: '8', name: '附加税', price1: 0, price2: 0 }
  ]
  let hideCost = [
    { id: '1', name: '招聘成本', price1: 125, price2: 0 },
    { id: '2', name: '培训成本', price1: 125, price2: 0 },
    { id: '3', name: '管理成本', price1: 125, price2: 0 },
    { id: '4', name: '替代成本', price1: 125, price2: 0 },
  ]
  let totalCost = [
    { id: '1', name: '合计用工成本', price1: 0, price2: 0 },
  ]
  let hideCoseNameArr = hideCost.reduce((pre, cur) => ([...pre, cur.name]), [])
  if (wage) {
    // 加班费
    let jiaban = showCost[0].price1 = (wage * 1.5 * 0.1).toFixed(2)
    // 五险一金
    let baoxian = showCost[1].price1 = ((parseFloat(wage) + parseFloat(jiaban)) * 0.323).toFixed(2)
    // 离职补偿金
    if (reginPrice.current) {
      showCost[3].price1 = wage * reginPrice.current
    }
    // 竞业补偿金
    showCost[4].price1 = (wage * 0.3).toFixed(2)

    // 外包管理费用
    showCost[5].price2 = (wage * 0.1).toFixed(2)
    // 进项增值税
    let zengzhi = showCost[6].price2 = (-((wage * 1.1) / 1.06 * 0.06)).toFixed(2)
    // 附加税
    showCost[7].price2 = (zengzhi * 0.12).toFixed(2)
    // 显性成本总计
    let showCostTotalPrice1 = showCost.reduce((pre, cur) => {
      return pre + parseFloat(cur.price1)
    }, 0)
    // 隐性成本总计
    let showCostTotalPrice2 = showCost.reduce((pre, cur) => {
      return pre + parseFloat(cur.price2)
    }, 0)
    totalCost[0].price1 = (parseFloat(wage) + showCostTotalPrice1 + 500 + (isNaN(parseFloat(otherPrice1)) ? 0 : parseFloat(otherPrice1))).toFixed(2)
    totalCost[0].price2 = (parseFloat(wage) + showCostTotalPrice2 + (isNaN(parseFloat(otherPrice2)) ? 0 : parseFloat(otherPrice2))).toFixed(2)
  }
  return (
    <View>
      <View className={styles.bannerWrapper}>
        <Image src={'https://collect.cocogc.cn/profile/upload/2020/11/12/2e792d5655477256f49dea51b8f9103c.png'} className={styles.banner}></Image>
      </View>
      <View className={`at-row ${styles.row}`}>
        <View className={`at-col at-col--wrap ${styles.col}`}>项   目</View>
        <View className={`at-col at-col--wrap ${styles.col}`}><Text decode={true}>原岗位全日制用工模式\n(计算指标)</Text></View>
        <View className={`at-col at-col--wrap ${styles.col}`}><Text decode={true}>原岗位灵活用工模式\n(计算指标)</Text></View>
      </View>
      <View className={styles.row}>
        <AtInput
          className={styles.wage}
          clear
          title="基本工资"
          placeholder="请手动输入"
          type="digit"
          value={wage}
          onChange={(val, event) => {setWage(val); return val}}
        >
          <Text className={styles.end}>薪金/月</Text>
        </AtInput>
      </View>
      <View className={styles.title}>显性成本</View>
      <View className={styles.container}>
        {
          showCost.map((item, index) => {
            return (
              <View className={`at-row ${styles.row}`} key={index + ''}>
                <View className={`at-col at-col--wrap ${styles.col}`}>
                  <Text decode={true}>{item.name}</Text>
                  { item.id === '4' && <Textarea
                    placeholder="（需手动输入在职总月份数，规则是小于6个月算0.5年，大于6个月算1年）"
                    className={styles.area}
                    placeholderStyle={"color: #cccccc"}
                    value={resign}
                    onInput={handlerSetRegin}
                    >
                  </Textarea> }
                </View>
                <View className={`at-col at-col--wrap ${styles.col} ${item.price1 >= 0 ? styles.textSuccess: styles.textFail}`}>{item.price1}</View>
                <View className={`at-col at-col--wrap ${styles.col} ${item.price2 >= 0 ? styles.textSuccess: styles.textFail}`}>{item.price2}</View>
              </View>
            )
          })
        }
      </View>
      <View className={styles.title}>隐性成本（默认为市场价格）</View>
      <View className={styles.container}>
        <View className={`at-row ${styles.row}`}>
          <View className={`at-col at-col--wrap ${styles.col}`} style={"display:flex; flex-direction: column;padding: 0;"}>
            {
              hideCoseNameArr.map((item, index) => {
                return (
                  <View key={index + ''} style={"padding: 30rpx 24rpx;box-sizing: border-box;flex:1;"}>
                    <Text decode={true}>{item}</Text>
                  </View>
                )
              })
            }
          </View>
          <View className={`at-col at-col--wrap ${styles.col} ${styles.textSuccess}`} style={"padding: 0;"}>500</View>
          <View className={`at-col at-col--wrap ${styles.col} ${styles.textSuccess}`} style={"display:flex; flex-direction: column;padding: 0;"}>
            {
              Array.from({length: hideCoseNameArr.length}).map((item, index) => {
                return (
                  <View key={index + ''} style={"padding: 30rpx 24rpx;box-sizing: border-box;flex:1;"}>
                    <Text decode={true}>0</Text>
                  </View>
                )
              })
            }
          </View>
        </View>
        <View className={`at-row ${styles.row}`}>
          <View className={`at-col at-col--wrap ${styles.col}`}><Text decode={true}>其他</Text></View>
          <View className={`at-col at-col--wrap ${styles.col}`}>
            <Input className={styles.input} placeholder="请手动输入" type="digit" value={otherPrice1} onInput={(e) => setOtherPrice1(e.detail.value)}></Input>
          </View>
          <View className={`at-col at-col--wrap ${styles.col}`}>
            <Input className={styles.input} placeholder="请手动输入" type="digit" value={otherPrice2} onInput={(e) => setOtherPrice2(e.detail.value)}></Input>
          </View>
        </View>
      </View>
      <View className={styles.title}>合计用工成本</View>
      <View className={styles.container}>
        {
          totalCost.map(item => {
            return (
              <View className={`at-row ${styles.row}`} key={item.id}>
                <View className={`at-col at-col--wrap ${styles.col} py-60`}><Text decode={true}>{item.name}</Text></View>
                <View className={`at-col at-col--wrap ${styles.col} py-60 ${item.price1 >= 0 ? styles.textSuccess: styles.textFail}`}>{item.price1}</View>
                <View className={`at-col at-col--wrap ${styles.col} py-60 ${item.price2 >= 0 ? styles.textSuccess: styles.textFail}`}>{item.price2}</View>
              </View>
            )
          })
        }
      </View>
    </View>
  )
}

EmployComputed.config = {
  navigationBarTitleText: '用工方式计算'
}

EmployComputed.options = {
  addGlobalClass: true
}

export default EmployComputed
